<template>
    <div>
    
  <div class="mod-demo-echarts">
    <el-row :gutter="20">
        <el-col :span="24">
        <el-card>
            <el-page-header @back="goBack" content="患病数据分析"></el-page-header>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div id="J_chartScatterBox1" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div id="J_chartScatterBox2" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  </div>
</template>

<script>
import * as ecStat from "echarts-stat";
import * as echarts from "echarts";
echarts.registerTransform(ecStat.transform.regression);
import { getAgeEvaluation, getBmiEvaluation } from "@/api/common/index";
export default {
  data() {
    //这里存放数据
    return {
      chartScatter: null,
      ageSeriesData: null,
      bmiSeriesData: null,
    };
  },
  mounted() {
    // 查询统计数
    this.initChartScatter1();
    this.initChartScatter2();
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartScatter) {
      this.chartScatter.resize();
    }
  },
  //方法集合
  methods: {
    // 返回方法
    goBack(){
         // 路由跳转到指定页面
      this.$store.dispatch("tagsView/delView", this.$route).then(() => {
        this.$router.push({
          path: "/gonitis/patient/info"
        });
      });
    },
    // 初始化年龄与KOA散点图
    async initChartScatter1() {
      const text = "患者年龄与KOA等级统计";
      const subtext = "建立KOA等级与年龄的线性回归问题模型";
      await getAgeEvaluation().then((response) => {
        this.ageSeriesData = response.data;
      });
      var option = {
        dataset: [
          {
            source: this.ageSeriesData,
          },
          {
            transform: {
              type: "ecStat:regression",
              // 'linear' by default.
              // config: { method: 'linear', formulaOn: 'end'}
            },
          },
        ],
        toolbox: {
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        title: {
          text: text,
          subtext: subtext,
          sublink: "https://github.com/ecomfe/echarts-stat",
          left: "center",
        },
        legend: {
          bottom: 5,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: {
          name: "患者年龄",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          name: "KOA等级",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "KOA等级",
            type: "scatter",
          },
          {
            name: "line",
            type: "line",
            datasetIndex: 1,
            symbolSize: 0.1,
            symbol: "circle",
            label: { show: true, fontSize: 16 },
            labelLayout: { dx: -20 },
            encode: { label: 2, tooltip: 1 },
          },
        ],
      };
      this.chartPie = echarts.init(document.getElementById("J_chartScatterBox1"));
      this.chartPie.setOption(option);
      window.addEventListener("resize", () => {
        this.chartPie.resize();
      });
    },
    // 初始话bmi与KOA关系散点图
    async initChartScatter2() {
      const text = "患者BMI指数与KOA等级统计";
      const subtext = "建立KOA等级与患者BMI指数的线性回归问题模型";
      await getBmiEvaluation().then((response) => {
        this.bmiSeriesData = response.data;
      });
      var option = {
        dataset: [
          {
            source: this.bmiSeriesData,
          },
          {
            transform: {
              type: "ecStat:regression",
              // 'linear' by default.
              // config: { method: 'linear', formulaOn: 'end'}
            },
          },
        ],
        toolbox: {
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        title: {
          text: text,
          subtext: subtext,
          sublink: "https://github.com/ecomfe/echarts-stat",
          left: "center",
        },
        legend: {
          bottom: 5,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: {
          name: "BMI指数",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          name: "KOA等级",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "KOA等级",
            type: "scatter",
          },
          {
            name: "line",
            type: "line",
            datasetIndex: 1,
            symbolSize: 0.1,
            symbol: "circle",
            label: { show: true, fontSize: 16 },
            labelLayout: { dx: -20 },
            encode: { label: 2, tooltip: 1 },
          },
        ],
      };
      this.chartPie = echarts.init(document.getElementById("J_chartScatterBox2"));
      this.chartPie.setOption(option);
      window.addEventListener("resize", () => {
        this.chartPie.resize();
      });
    },
  },
};
</script>
<style lang="scss">
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
.chart-box {
  min-height: 400px;
}
</style>
